<template>
	<view>
		<view class="searchBox">
			<uv-search placeholder="请输入搜索内容" v-model="keyword" animation="false"></uv-search>
		</view>
		<view class="goods">
			<view class="goods-left">
				<view class="goodsTxte" v-for="(item, index) in LeftClass" :key="index"
					:class="{ 'LeftTextActive': LeftClassIndex === item.id }" @click="handleLeftText(item)">
					{{item.classifyName}}
				</view>
			</view>
			<view class="goods-right">
				<view class="Headclass">
					<!-- 第一个 item 固定显示 -->
					<view v-if="Toplist.length > 0" class="Topitem TopitemFixed"
						:class="{ 'TopitemActive': TopcurrentIndex === 0 }" @click="chesckList(Toplist[0],-1)">
						{{ Toplist[0].classifyName }}
					</view>
					<!-- 剩余 item 放入可滚动区域 -->
					<scroll-view scroll-x="true" class="scroll-container">
						<view class="scroll-content">
							<view v-for="(item, index) in Toplist.slice(1)" :key="index" class="Topitem"
								:class="{ 'TopitemActive': TopcurrentIndex === index + 1 }"
								@click="chesckList(item,index )">
								{{ item.classifyName }}
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 内容区 -->
				<scroll-view scroll-y="true" class="frame-scroll" @scroll="handleScroll">
					<view class="content-frame">
						<view class="content-item" v-for="(item,index) in listData" :key="index"
							@click="ToDetail(item)">
							<view class="image-frame">
								<image src="/static/test/test_1.png" class="image" mode=""></image>
								<!-- 		<image src="/static/icon/icon_heart_active.png" class="icon-heart" style="z-index: 2;"
									:style="{
											transform: `scale(${item.isHeart? '1': '0'})`
										}" @click="heartFn(item)" mode=""></image>
								<image src="/static/icon/icon_heart.png" class="icon-heart" mode="" @click="heartFn(item)"> -->
								</image>
							</view>
							<view class="title">
								{{item.storeName}}
							</view>
							<view class="price">
								￥{{item.price}}
							</view>
						</view>
					</view>
					<view class="" style="height: 200px;" v-if="loadmore!==true">
						<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
							:nomore-text="nomoreText" />
					</view>
				</scroll-view>


			</view>
		</view>
		<!--悬浮客服按钮 -->
		<liu-drag-button style="z-index: 50;">
			<image src="../../static/icon/icon-kf.png" mode="" style="width: 100%;height: 100%;"></image>
		</liu-drag-button>

		<!-- 底部导航栏 -->
		<tabbarVue :currentIndex="1"></tabbarVue>

	</view>
</template>

<script>
	import {
		$post,
		$get
	} from '@/utils/request';
	import tabbarVue from '../../components/tabbar/tabbar.vue';
	import uvEmpty from '@/components/notHave/notHave.vue';
	export default {
		components: {
			tabbarVue,
			uvEmpty,
		},
		data() {
			return {
				keyword: '',
				LeftClassIndex: 0, //一级分类
				LeftClass: [],
				TopcurrentIndex: 0, //产品分类
				Toplist: [{
					classifyName: "全部",
					id: 0
				}, ],
				listData: [], //商品数据列表
				loadmore: false,
				// status: 'loadmore',
				// loadingText: '努力加载中',
				// loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了...',
				datalist: [{
						isHeart: true
					},
					{
						isHeart: false
					},
					{
						isHeart: false
					},
					{
						isHeart: false
					},
					{
						isHeart: false
					},
					{
						isHeart: false
					},
				],

			}
		},
		onShow() {
			const isReturning = uni.getStorageSync('isReturningFromDetail');
			if (isReturning) {
				// 清除标志位
				uni.removeStorageSync('isReturningFromDetail');
				return;
			}

			const selectedItem = uni.getStorageSync('selectedData');
			if (selectedItem) {
				this.checkFather();
				this.handleLeftText(selectedItem.item);
				uni.removeStorageSync('selectedData'); // 用完清除
			} else {
				this.checkFather(); // 没有数据，执行默认方法
			}
		},
		methods: {
			checkFather() {
				const oneClass = uni.getStorageSync('oneClassification'); //本地获取一级分类
				const selectedItem = uni.getStorageSync('selectedData');
				this.LeftClass = oneClass
				this.LeftClassIndex = oneClass[0].id
				this.Toplist[0].id = oneClass[0].id
				if (!selectedItem) { //判断是否有值, ture 首页跳转
					this.checkChildren(oneClass[0].id)
					this.chesckList(oneClass[0], -1)
				}
				//首次查询一级分类
				// $post('/system/classify/allList', {
				// 	parentId: 0
				// }).then(res => {
				// 	this.LeftClass = res.data
				// 	this.LeftClassIndex = this.LeftClass[0].id
				// 	this.Toplist[0].id = this.LeftClass[0].id
				// 	this.checkChildren(this.LeftClass[0].id)
				// 	this.chesckList(this.LeftClass[0], -1)
				// })
			},
			handleLeftText(val) { //一级分类点击
				this.LeftClassIndex = val.id
				this.Toplist[0].id = val.id; // 给第一个全部赋值 id
				this.Toplist.splice(1); // 保留第一个全部，删除其他所有
				this.TopcurrentIndex = 0
				this.checkChildren(val.id)
				this.chesckList(val, -1)

			},
			checkChildren(id) { //查询二级栏目分类
				$post('/system/classify/allList', {
					parentId: id
				}).then(res => {
					this.Toplist.splice(1);
					this.Toplist.push(...res.data)
				})
			},
			chesckList(item, index) { //二级栏目查询商品列表
				$post('/system/storeProduct/allList', {
					classifyId: item.id
				}).then(res => {
					this.listData = res.data
				})
				this.TopcurrentIndex = index + 1
			},
			handleScroll(e) {
				const query = wx.createSelectorQuery()
				query.select('.frame-scroll').boundingClientRect(rect => {
					const clientHeight = rect.height
					const scrollTop = e.detail.scrollTop
					const scrollHeight = e.detail.scrollHeight // 使用小程序提供的标准字段

					if (scrollHeight - scrollTop - clientHeight < 10) {
						// console.log("滚动到底部")
					}
				}).exec()
			},
			loadMore() {
				// console.log('加载更多数据...');
			},
			ToDetail(item) {
				uni.setStorageSync('isReturningFromDetail', false); //判断是否从详情页跳回
				uni.navigateTo({
					url: `/pages/DetailPages/DetailPages?item=${item.id}`
				})
			},




		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100% !important;
		overflow: hidden !important;
	}

	.searchBox {
		width: 90%;
		margin: 0 auto;
	}

	.goods {
		width: 100%;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;

		.goods-left {
			width: 20%;
			height: 100vh;
			background-color: #F2F2F2;
			padding-top: 10px;
			display: flex;
			gap: 20px;
			flex-direction: column;
			align-items: center;
			overflow: hidden;


			.goodsTxte {
				width: 100%;
				padding: 10px 0px;
				font-size: 16px;
				color: #333333;
				text-align: center;
			}

			.LeftTextActive {
				width: 100%;
				padding: 10px 0px;
				color: #fff;
				background-color: #32b9b3;
			}
		}

		.goods-right {
			width: 78%;
			height: 100%;

			.Headclass {
				width: 100%;
				height: 50px;
				background-color: #F2F2F2;
				padding-left: 10px;
				display: flex;
				align-items: center;
				gap: 10px;
				overflow: hidden;

				.TopitemFixed {
					flex: 0 0 auto;
					padding: 6px 10px;
					color: #333;
					white-space: nowrap;
					background-color: #F2F2F2;
					position: relative;
					z-index: 2;
				}

				/* 滚动区域 */
				.scroll-container {
					flex: 1;
					overflow-x: auto;
					display: flex;
					align-items: center;
					-webkit-overflow-scrolling: touch;
					padding-right: 20px;

					/* 滚动内容 */
					.scroll-content {
						display: flex;
						white-space: nowrap;

					}
				}

				.Topitem {
					padding: 6px 10px;
					color: #333;
					display: flex;
				}

				.TopitemActive {
					background-color: #fff;
					color: #d8a23e;
					font-weight: 600;
				}

			}


			.frame-scroll {
				height: 100%;
				overflow-y: auto;
				box-sizing: border-box;
				padding: 10rpx;
				height: calc(100vh - 60rpx);

				.content-frame {
					padding: 30rpx 0rpx;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 10rpx;

					.content-item {
						font-size: 16px;

						.image-frame {
							width: 280rpx;
							height: 280rpx;
							border-radius: 8px;
							overflow: hidden;
							position: relative;
							margin: 30rpx auto;

							.image {
								width: 100%;
								height: 100%;
							}

							.icon-heart {
								position: absolute;
								transition: all .3s;
								bottom: 30rpx;
								right: 30rpx;
								width: 25px;
								height: 25px;
							}
						}

						.title {
							width: 260rpx;
							font-size: $title;
							padding: 0 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.price {
							padding-top: 5px;
							color: #deaf5c;

						}
					}
				}
			}
		}
	}
</style>